<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>确认订单</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/order.css">
</head>

<body>
    <!-- 1. 网页头部 -->
    <header>
        <div class="center header-center">
            <!-- 左边logo -->
            <img class="logo" src="./images/logo.png" alt="">
            <!-- 右边工具栏 -->
            <div class="toolbar">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <div class="search-box">
                    <input type="text" placeholder="热门搜索：干花花瓶">
                    <img src="./images/ss.png" alt="">
                </div>
                <img class="mine-icon" src="./images/gt3.png" alt="">
                <img src="./images/ewm.png" alt="">
            </div>
        </div>
    </header>
    <!-- 2. 导航菜单 -->
    <nav>
        <div class="center">
            <!-- 菜单 -->
            <ul class="menu">
                <li>
                    <!-- 可以页面跳转 -->
                    <a href="">首页</a>
                </li>
                <li class="active">
                    <!-- 可以页面跳转 -->
                    <a href="">所有商品</a>
                    <!-- 二级菜单 -->
                    <div class="sub-menu">1111</div>
                </li>
                <li>
                    <!-- 可以页面跳转 -->
                    <a href="">装饰摆件</a>
                </li>
                <li>
                    <!-- 可以页面跳转 -->
                    <a href="">布艺软饰</a>
                </li>
                <li>
                    <!-- 可以页面跳转 -->
                    <a href="">墙式壁挂</a>
                </li>
                <li>
                    <!-- 可以页面跳转 -->
                    <a href="">蜡艺香薰</a>
                </li>
                <li>
                    <!-- 可以页面跳转 -->
                    <a href="">创意家居</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 订单进度 -->
    <div class="order-progress">
        <div class="center">
            <span>确认订单</span>
            <img src="./images/cartTop02.png" alt="">
            <span class="empty">确认订单</span>
        </div>
    </div>

    <!-- 订单信息 -->
    <div class="order-info">
        <div class="center">
            <!-- 左边 -->
            <div class="left-info">
                <div class="info-title">
                    <span>收件信息</span>
                    <a href="#">新增地址</a>
                </div>
                <div class="card-container">
                    <div class="address-card">
                        <!-- 地址卡片头部 -->
                        <div class="card-header">
                            <!-- 头部左边 -->
                            <div class="header-left">
                                <span>张三</span>
                                <span class="default-address">[默认地址]</span>
                            </div>
                            <!-- 头部右边 -->
                            <div class="header-right">
                                <span class="delete-button">删除</span>
                                <span>编辑</span>
                            </div>
                        </div>
                        <!-- 地址卡片内容 -->
                        <div class="card-body">
                            <p>河北省 唐山市 路北区 大学生公寓村大学生公寓村大学生公寓村大学生公寓村学生公寓村大学生公寓村大学生公寓村</p>
                            <p>15732570937</p>
                        </div>
                    </div>
                    <div class="address-card">
                        <!-- 地址卡片头部 -->
                        <div class="card-header">
                            <!-- 头部左边 -->
                            <div class="header-left">
                                <span>张三</span>
                            </div>
                            <!-- 头部右边 -->
                            <div class="header-right">
                                <span class="set-default">设为默认</span>
                                <span class="delete-button">删除</span>
                                <span>编辑</span>
                            </div>
                        </div>
                        <!-- 地址卡片内容 -->
                        <div class="card-body">
                            <p>河北省 唐山市 路北区 大学生公寓村</p>
                            <p>15732570937</p>
                        </div>
                    </div>
                    <div class="address-card">
                        <!-- 地址卡片头部 -->
                        <div class="card-header">
                            
                            <!-- 头部左边 -->
                            <div class="header-left">
                                <span>张三</span>
                            </div>

                            <!-- 头部右边 -->
                            <div class="header-right">
                                <span class="set-default">设为默认</span>
                                <span class="delete-button">删除</span>
                                <span>编辑</span>
                            </div>

                        </div>
                        <!-- 地址卡片内容 -->
                        <div class="card-body">
                            <p>河北省 唐山市 路北区 大学生公寓村</p>
                            <p>15732570937</p>
                        </div>
                    </div>
                </div>

                <div class="info-title">
                    <span>支付方式</span>
                </div>
                <div class="info-title">
                    <span>选择快递</span>
                </div>

            </div>
            <!-- 右边 -->
            <div class="right-info">右边</div>
        </div>
    </div>


    <!-- 6. 四个服务 -->
    <div class="service">
        <div class="center">
            <div class="service-item">
                <img src="./images/foot1.png" alt="">
                <span>7天无理由退货</span>
            </div>
            <div class="service-item">
                <img src="./images/foot1.png" alt="">
                <span>7天无理由退货</span>
            </div>
            <div class="service-item">
                <img src="./images/foot1.png" alt="">
                <span>7天无理由退货</span>
            </div>
            <div class="service-item">
                <img src="./images/foot1.png" alt="">
                <span>7天无理由退货</span>
            </div>
        </div>
    </div>
    <!-- 7. 网页底部 -->
    <footer>
        <div class="center">
            <p>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号</p>
            <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>
    </footer>
</body>

</html>